/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-11-02 13:59:15
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2023-01-03 09:28:28
 * @FilePath: \adminstration\src\Pages\Front\HeYi\PartyBuilding\PartyBuilding.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { useState } from 'react'
import { CommonSmallTitleTwo } from '../../Common/Other/SmallTitle'
import { project } from '../../../../Common/Data'
import { useBoolean, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { PartyBuildingSwiper } from '../../Common/Other/SwiperBox'
import { LargeScreenTablesModal } from '../../Common/LargeScreen/LargeScreenModal'
import { useEffect } from 'react'
const { imageUrl } = project[window.location.hostname]

const Left = () => {
    const [Number, setNumber] = useState(0)
    const [NumberList, setNumberList] = useState([])
    const [TwoList, setTwoList] = useState([])
    const { runAsync: getPersonStatGetnPartyMemberStatByOrg } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let number = 0
            let data = list.map(({ uuid, tableName, partyMemberCount }) => {
                number += partyMemberCount
                return { uuid, title: tableName, value: partyMemberCount }
            })
            setNumberList(data)
            setNumber(number)
        },
    })

    const { runAsync: getPersonStatGetnPartyMember } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => setTwoList(list.map(item => item.tableName)),
    })

    useEffect(() => {
        getPersonStatGetnPartyMemberStatByOrg({ url: 'getPersonStatGetnPartyMemberStatByOrg' })
        getPersonStatGetnPartyMember({ url: 'getPersonStatGetnPartyMember' })
    }, [getPersonStatGetnPartyMemberStatByOrg, getPersonStatGetnPartyMember])

    return (
        <div className="Left">
            <CommonSmallTitleTwo className="ItemTitle red" title="人员统计" flex={1}>
                <div className="One">
                    <div className="TitleSmall">
                        <div>项目党员人数</div>
                        <div />
                    </div>
                    <div className="Box">
                        <div className="top">
                            <img src={imageUrl + '徽章.png'} alt="" />
                            <div>
                                <div>党员总数 ：</div>
                                <div>{Number}人</div>
                            </div>
                        </div>
                        <div className="list">
                            {NumberList.map(({ uuid, title, value }) => (
                                <div key={uuid}>
                                    <div>{title}</div>
                                    <div>{value}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <div className="Two">
                    <div className="TitleSmall">
                        <div>先进党支部</div>
                        <div />
                    </div>
                    <div className="Box">
                        {TwoList.map((item, index) => (
                            <div key={`TwoBox${index}`}>{item}</div>
                        ))}
                    </div>
                </div>
            </CommonSmallTitleTwo>
        </div>
    )
}

const Right = () => {
    const [DataOne, setDataOne] = useState([])
    const [DataTwo, setDataTwo] = useState([])

    const [ModalState, { setTrue, setFalse }] = useBoolean(false)
    const [TableName, setTableName] = useState()
    const [Uuid, setUuid] = useState()

    const { runAsync: getInfoManageOne } = useRequest(Http, { manual: true, onSuccess: ({ list }) => setDataOne(list) })
    const { runAsync: getInfoManageTwo } = useRequest(Http, { manual: true, onSuccess: ({ list }) => setDataTwo(list) })

    useEffect(() => {
        getInfoManageOne({
            url: 'getInfoManage',
            data: { InfoTypeManageUuid: 'f5e2ce53-e8f0-412e-8222-8a827fd13cfc', pageSize: 7 },
        })
        getInfoManageTwo({
            url: 'getInfoManage',
            data: { InfoTypeManageUuid: 'f5e2ce53-e8f0-412e-8222-8a827fd14cfc', pageSize: 7 },
        })
    }, [getInfoManageOne, getInfoManageTwo])

    return (
        <div className="Right">
            <CommonSmallTitleTwo className="ItemTitle red" title="党建要闻" flex={1}>
                <div>
                    <img src={imageUrl + '领航.png'} alt="" />
                    <div>
                        <div>
                            {DataOne.map(({ uuid, tableName, eventDate }) => (
                                <div
                                    key={uuid}
                                    onClick={() => {
                                        setTableName(tableName)
                                        setUuid(uuid)
                                        setTrue()
                                    }}
                                >
                                    <div>{tableName}</div>
                                    <div>{eventDate}</div>
                                </div>
                            ))}
                        </div>
                        <div>
                            <PartyBuildingSwiper data={DataOne} />
                        </div>
                    </div>
                </div>
                <div>
                    <img src={imageUrl + '践行.png'} alt="" />
                    <div>
                        <div>
                            {DataTwo.map(({ uuid, tableName, eventDate }) => (
                                <div
                                    key={uuid}
                                    onClick={() => {
                                        setTableName(tableName)
                                        setUuid(uuid)
                                        setTrue()
                                    }}
                                >
                                    <div>{tableName}</div>
                                    <div>{eventDate}</div>
                                </div>
                            ))}
                        </div>
                        <div>
                            <PartyBuildingSwiper data={DataTwo} />
                        </div>
                    </div>
                </div>
            </CommonSmallTitleTwo>
            {ModalState && (
                <LargeScreenTablesModal
                    className="ItemTitle red"
                    Off={setFalse}
                    title={TableName}
                    parameter={{
                        uuid: Uuid,
                        top: 'two',
                        type: 'Article',
                        classification: 'article001',
                    }}
                />
            )}
        </div>
    )
}

const PartyBuilding = () => {
    return (
        <div className="PartyBuilding">
            <Left />
            <Right />
        </div>
    )
}

export default PartyBuilding
